import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, message } from 'antd';
import { WeaLocaleProvider, WeaTab, WeaProgress } from 'ecCom'
import { WeaTableNew } from 'comsMobx'
import { ConditionNum } from '../list/listCondition'
import GovernLight from '../governPoint/light';
import GovernBadge from '../governPoint/badge';
import Model from '../model/index';
import ModalConfirm from '../modalConfirm/index';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

//督办任务列表
@inject("taskStore")
@observer
export default class GovernTaskList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        }
    }

    componentDidMount = () => {
        const { taskStore, taskAccountStore } = this.props;
        let { currentData } = taskAccountStore
        taskStore.setDataType("5");
        //初始化页面
        if (!taskStore.isSuperSearch) {
            taskStore.setDoAgain(false)
            taskStore.tabSelectedKey = '0';
            taskStore.dealtype = '0';
            let params = { "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": taskAccountStore.selectedTreeKey, 'projid': currentData.projid, 'prjCategory': currentData.prjCategory, 'prjid': currentData.prjid };
            taskStore.init(params, taskAccountStore)
        }
    }
    componentWillReceiveProps(newProps) {
        if (newProps.taskKey) {
            if (newProps.taskKey !== this.props.taskKey) {
                const { taskStore, taskAccountStore } = newProps;
                let { currentData } = taskAccountStore
                //初始化页面
                if (!taskStore.isSuperSearch) {
                    taskStore.setDoAgain(false)
                    taskStore.tabSelectedKey = '0';
                    taskStore.dealtype = '0';
                    let params = { "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": taskAccountStore.selectedTreeKey, 'projid': currentData.projid, 'prjCategory': currentData.prjCategory, 'prjid': currentData.prjid };
                    taskStore.init(params, taskAccountStore)
                }
            }
        }
    }

    render() {
        const { taskStore, taskAccountStore ,taskAccountStore:{baseSearchValue} } = this.props;
        const { tableTaskStore, formB, columnsNum, tabSelectedKey,modelType,id,content } = taskStore;
        const { visible } = this.state;
        let tablescroll = document.body.clientHeight - 223.89 - 54;
        return (
            <div className="g-pro">
                <div className='g-pro-proMain g-account'>
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ur717g`}
                        datas={[{ key: '0', title: getLabel(508055, "全部任务") }, { key: '1', title: getLabel(508056, "主办任务") }, { key: '2', title: getLabel(508057, "协办任务") }]}
                        searchType={['base', 'advanced']}
                        setShowSearchAd={(visible) =>{this.props.taskAccountStore.baseSearchValue = '';this.setState({ visible }) }}
                        searchsAd={
                            <ConditionNum ecId={`${this && this.props && this.props.ecId || ''}_ConditionNum@wu3u91`} listStore={taskStore} taskAccountStore = {taskAccountStore} type="taskAccount" formB={formB} col={2} onEnterSearch={(visible) => this.setState({ visible })}></ConditionNum>
                        }
                        buttonsAd={this.getSearchButtons()}
                        showSearchAd={visible}
                        onSearch={this.doSearch}
                        keyParam="key"
                        selectedKey={tabSelectedKey}
                        onChange={this.changeTab}
                        searchsBaseValue = {baseSearchValue}
                        onSearchChange ={this.onSearchChange}
                    >
                    </WeaTab>
                    <div >
                        {
                            // (!tableTaskStore.loading && toJS(tableTaskStore).columns.length>0 ) && //xk:解决无数据不显示列头问题(可以删除，因为其内部自己处理了自带loading)
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@qhjrwz`}
                                dragColumns = '0'
                                comsWeaTableStore={tableTaskStore}
                                hasOrder={true}
                                getColumns={c => this.reRenderColumns(c)}
                                scroll={columnsNum <= 10 ? { x: 0, y: tablescroll } : { x: 120 * columnsNum, y: tablescroll }}
                            />
                        }
                    </div>
                    <div>
                        <Model ecId={`${this && this.props && this.props.ecId || ''}_Model@z72xe1`} modelType={modelType} id={id} contentStore={taskStore}></Model>
                    </div>
                    <div>
                        <ModalConfirm ecId={`${this && this.props && this.props.ecId || ''}_ModalConfirm@7uo7sf`} modelType={modelType} id={id} content={content} confirmStore={taskStore}></ModalConfirm>
                    </div>
                </div>
            </div>
        )
    }

    onSearchChange = (params) =>{
        const { taskAccountStore} = this.props;
        taskAccountStore.baseSearchValue = params;
    }

    changeTab = (key) => {
        const { taskStore, taskAccountStore } = this.props;
        let { currentData } = taskAccountStore
        taskStore.dealtype = key;
        taskStore.tabSelectedKey = key;
        taskAccountStore.baseSearchValue = '';
        taskStore.init({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0, 'projid': currentData.projid, 'prjCategory': currentData.prjCategory })

    }
    reRenderColumns(columns) {
        const { taskStore: { getcolumnsNum } } = this.props;
        let columnsIndex = 0;
        columns.forEach(c => {
            //19.3.22 lusx #566607 概述：E9，督办，列表，标题较多，没有横向滚动条，没展示全
            if (c.display === "true") {
                columnsIndex = columnsIndex + 1;
            }
            if (c.dataIndex == 'progress') {
                c.render = function (text, record) {
                    return <span className='wea-prj-progressStyle' >
                        <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@9dai12@${c.dataIndex}`} percent={record.progress || 0} />
                    </span>
                }
            } else if (c.dataIndex == 'status') {
                c.render = function (text, record) {
                    return <span >
                        <GovernLight ecId={`${this && this.props && this.props.ecId || ''}_GovernLight@8eih1z`} record={record} />
                    </span>
                }
            } else if (c.dataIndex == 'feedstatus') {
                c.render = function (text, record) {
                    return <span >
                        <GovernLight ecId={`${this && this.props && this.props.ecId || ''}_GovernLight@evcxsg`} record={record} showType="feedback" />
                    </span>
                }
            } else if (c.dataIndex == 'enddate') {
                c.render = function (text, record) {
                    return <span>
                        <GovernBadge ecId={`${this && this.props && this.props.ecId || ''}_GovernBadge@rcjxhk`} record={record} text={text} hideMsg={true} />
                    </span>
                }
            } else if (c.dataIndex == 'name') {
                c.render = function (text, record) {
                    let hrefText = `javaScript:hrefTaskInfo(${record.id});`
                    return <span>
                        {/*   {record.sKeyFlagspan === "1" ? <span className="g-table-cui">{getLabel('390310',"催")}</span>: null}   */}
                        <a href={hrefText} target="_self">{text}</a>
                    </span>
                }
            } else {
                c.render = function (text, record) {
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                }
            }
        })
        getcolumnsNum(columnsIndex+4);
        return columns;
    }

    /* 高级搜索操作按钮组 */
    getSearchButtons() {
        const { taskStore } = this.props;
        const { clearFormFields } = taskStore;
        const btnStyle = { borderRadius: 3, width: 80 }
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b3fm2f@search`} type="primary" style={btnStyle} onClick={this.forwardQueryResult.bind(this)}>{getLabel(197, "搜索")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3ty4jr@reset`} type="ghost" style={btnStyle} onClick={() => { taskStore.clearFormFields() }}>{getLabel(2022, "重置")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@on084r@cancel`} type="ghost" style={btnStyle} onClick={() => { this.cancel() }}>{getLabel(201, "取消")}</Button>)
        ]
    }
    /* 搜索面板搜索方法 */
    forwardQueryResult() {
        const { taskStore, taskAccountStore } = this.props;
        let { currentData } = taskAccountStore
        let accountParams = { 'projid': currentData.projid, 'prjCategory': currentData.prjCategory }
        const { selectedTreeKey } = taskStore
        taskStore.doSearch({ fromSuperPage: true, "categoryid": selectedTreeKey, "isSuperSearch": true, ...accountParams })
        this.setState({ visible: false })
    }
    /* 高级搜索取消方法 */
    cancel() {
        this.setState({ visible: false })
    }
    /*
     * 顶部搜索，select的key值改变，执行方法
    */
    handleChange(data) {
        if (Object.keys(data)[0] == "selectKey") {
            const { taskStore } = this.props;
            taskStore.handleChange();
        }
    }

    doSearch = (value) => {
        const { taskStore, taskAccountStore } = this.props;
        let { currentData } = taskAccountStore
        let params = { 'name': value, 'projid': currentData.projid, 'prjCategory': currentData.prjCategory }
        taskStore.doSearch2(params);
    }

}
